<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <my-child :msg="giveData"></my-child>
    <hr>
    {{ giveData.a}}

</div>

<template id="child" >
    <div>
        <h3>我是子组件</h3>
        <h3>{{msg.a}}</h3>
        <input type="button" value="更改" @click="change">
    </div>
</template>

<script>

    //vue2.0中子组件如果想改父组件的值   父组件得传一个对象给子组件
    var vm = new Vue({
        data:{
            giveData:{
                a:'我是父组件的一个值'
            }
        },
        //子组件一定要记得取名字
        components:{'my-child':{
            props:['msg'],
            template:'#child',
            methods:{
                change(){
                 this.msg.a = '被更改了'
                }
            }
        }
        }
    }).$mount('#app')
</script>



</body>
</html>